<template>
    <view class="bottom-popup-mode" v-if="pageShow" @click="onClick">
        <view class="bottom-popup-subject" @click.stop>
            <view class="popup-title">发布需求</view>
            <view class="popup-btn">
                <view class="popup-btn-item" @click.stop="skipAddneeds(navList[0].name)">
                    <img :src="File_Url+'recruit-icon.png'" />
                    <text>{{navList[0].name}}</text>
                </view>
                <view class="popup-btn-item" @click.stop="skipAddneeds()">
                    <img :src="File_Url+'custom-icon.png'" />
                    <text>自定义</text>
                </view>
            </view>
            <view class="popup-web" @click.stop="popupwebShow">
                <img :src="File_Url+'web-icon.png'" />
                <text>电脑发布</text>
            </view>
        </view>
        <view class="popup-mode" v-if="webShow" @click.stop="popupwebShow">
            <view class="web-page" @click.stop>
                <view class="title">登录电脑端</view>
                <view class="content">
                    <view>1、已绑定手机并完成了单位认证或专家认证</view>
                    <view>2、用浏览器打开<text style="color: #3782FF" @click.stop="copyUrl('http://wxadmin.gdhrma.org.cn/#/login')">http://wxadmin.gdhrma.org.cn/#/login</text>，通过验证手机号登录</view>
                </view>
                <view class="button" @click="popupwebShow">
                    <text>我知道了</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "bottomPopup",
        props:{
            PopupShow:{
                required: true,
                type:Boolean
            },
            navList: {
                required: true
            }
        },
        data(){
            return{
                pageShow: this.PopupShow,
                File_Url: this.$api.FILE_URL,
                webShow: false
            }
        },
        methods:{
            onClick(){
                this.pageShow = false;
            },
            popupwebShow(){
                if (this.webShow){
                    this.webShow = false;
                } else {
                    this.webShow = true;
                }

            },
            //跳转新增需求
            skipAddneeds(name){
                this.pageShow = false;
                if (uni.getStorageSync('userToken')){
                    if (name){
                        uni.navigateTo({
                            url: '/pages/needs/addNeeds/addNeeds?type='+name
                        })
                    } else {
                        uni.navigateTo({
                            url: '/pages/needs/addNeeds/addNeeds'
                        })
                    }
                } else {
                    uni.showToast({
                        icon: 'none',
                        title: '请先登录！',
                        duration: 3000
                    })
                    setTimeout(function () {
                        uni.switchTab({
                            url: '/pages/person/person'
                        })
                    },3000)
                }
            },
            //复制链接
            copyUrl(url){
                let _this = this;
                uni.showModal({
                    title: '提示',
                    content: '将复制'+url+'至剪切板，是否继续进行！',
                    success: function (res) {
                        if (res.confirm) {
                            uni.setClipboardData({
                                data: url,
                                success: function () {
                                    uni.showToast({
                                        icon: 'success',
                                        title: '复制成功！'
                                    })
                                }
                            })
                        } else if (res.cancel) {
                            uni.showToast({
                                icon:'none',
                                title: "取消复制！"
                            })
                        }
                    }
                })
            }
        },
        watch:{
            PopupShow(newValue){
                this.pageShow = newValue;
            },
            pageShow(newValue,oldValue){
                this.$emit('update:PopupShow',newValue);
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .bottom-popup-mode{
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.8);
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        .bottom-popup-subject{
            position: fixed;
            bottom: 0;
            z-index: 2000;
            background: #FFFFFF;
            height: 500rpx;
            width: 100vw;
            border-radius: 40rpx 40rpx 0 0;
            .popup-title{
                padding: 32rpx 0;
                height: 56rpx;
                line-height: 56rpx;
                font-size: 40rpx;
                text-align: center;
                font-weight: bold;
            }
            .popup-btn{
                padding: 40rpx 160rpx;
                @include flex(flex-start);
                flex-direction: row;
                .popup-btn-item{
                    @include flex(flex-start);
                    flex-direction: column;
                    img{
                        width: 120rpx;
                        height: 120rpx;
                    }
                    text{
                        font-size: 36rpx;
                        height: 50rpx;
                        line-height: 50rpx;
                        padding: 20rpx 0;
                    }
                }
                .popup-btn-item:last-child{
                    margin-left: auto;
                }
            }
            .popup-web{
                @include flex();
                flex-direction: row;
                padding-top: 10rpx;
                img{
                    width: 30rpx;
                    height: 30rpx;
                }
                text{
                    height: 40rpx;
                    line-height: 40rpx;
                    color: #3782FF;
                    font-size: 28rpx;
                }
            }
        }
    }
    .popup-mode{
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.8);
        position: fixed;
        z-index: 3000;
        left: 0;
        top: 0;
        @include flex();
        flex-direction: column;
        .web-page{
            background: #FFFFFF;
            width: 70vw;
            padding: 30rpx;
            border-radius: 16rpx;
            .title{
                font-size: 32rpx;
                line-height: 50rpx;
                height: 50rpx;
            }
            .content{
                padding: 15rpx 0;
                @include flex(flex-start);
                flex-direction: column;
                view{
                    font-size: 28rpx;
                    line-height: 40rpx;
                    word-wrap: break-word;
                    padding: 15rpx 0;
                    width: 100%;
                }
            }
            .button{
                @include flex();
                flex-direction: column;
                text{
                    color: #FFFFFF;
                    background: #007aff;
                    padding: 0 80rpx;
                    font-size: 28rpx;
                    line-height: 50rpx;
                    height: 50rpx;
                    border-radius: 8rpx;
                }
            }
        }
    }
</style>